import {Component, OnInit} from '@angular/core';
import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {equalValidator, phoneAsyncValidator, phoneValidator} from '../../../valitor/Vadalitors';

@Component({
  selector: 'app-reactive-regist',
  templateUrl: './reactive-regist.component.html',
  styleUrls: ['./reactive-regist.component.css']
})
export class ReactiveRegistComponent implements OnInit {

  formModel: FormGroup;

  constructor(fb: FormBuilder) {
    /*
      fb.group =>new FormGroup({})
      [''] =>new FormControl(),可以三个参数，初始值，校验器，异步校验器
    */
    this.formModel = fb.group({
      username: ['', [Validators.required, Validators.maxLength(10), Validators.pattern('[a-zA-Z0-9]+')]],
      /*phone: ['', phoneValidator, phoneAsyncValidator],*/
      phone: ['', phoneValidator],
      passwords: fb.group({
        password: ['', Validators.minLength(6)],
        pconfrim: ['']
      }, {validator: equalValidator})
    });
  }

  onSubmit() {
    /*获取校验信息*/
    /*let validator: boolean = this.formModel.get('username').valid;
    console.log(validator);
    let errorss: any = this.formModel.get('username').errors;
    console.log('username的错误信息是:' + JSON.stringify(errorss));*/
    if (this.formModel.valid) {
      console.log(this.formModel.value);
    }
  }

  ngOnInit() {

  }

}
